<template>
  <div id="login">
    <headerNav></headerNav>
    <h1 class="title">体系文件管理系统</h1>
    <h2>登录系统</h2>
    <div class="cn">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="账号" prop="account">
                <el-input  v-model="ruleForm.account" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="账号类型" prop="type">
                <el-select v-model="ruleForm.type" placeholder="请选择账号类型">
                    <el-option label="管理员" value="admin"></el-option>
                    <el-option label="模板管理人员" value="tmpl"></el-option>
                    <el-option label="字典维护人员" value="dict"></el-option>
                    <el-option label="普通用户" value="user"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
  </div>
</template>
<script>
  import md5 from 'md5-nodejs'
  import headerNav from '../header.vue'
  export default {
    components: {headerNav},
    name: 'login',
    data () {
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass')
          }
          callback()
        }
      }
      let validateaccount = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账号'))
        } else {
          callback()
        }
      }
      return {
        ruleForm: {
          pass: '',
          account: '',
          type: 'admin'
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          account: [
            { validator: validateaccount, trigger: 'blur' }
          ]
        }
      }
    },
    mounted: function () {
      console.log('现在已进入登录页!')
    },
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      },
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.login()
          } else {
            this.$message.error('验证失败，请重新输入！')
            return false
          }
        })
      },
      jump (link) {
        this.$router.push(`${link}`)
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      },
      login () {
        let param = Object.assign({}, this.ruleForm)
        param.pass = md5(param.pass)
        this.$http.post('http://localhost:9081/login', param).then((res) => {
          if (res.status === 200 && res.data.code === 'ok') {
            this.jump(res.data.data[0].router)
          } else {
            this.$message.error(`${res.data.msg}`)
          }
        })
      }
    }
}
</script>
<style scoped  lang="less">
#login{
    width:100vw;
    height:650px;
    h1{
        font-size:24px;
        line-height: 32px;
        text-align: center;
        margin-top:24px;
    }
    h2{
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }
    .cn{
        width:400px;
        height:300px;
        background-color: #f1f1f1;
        border-radius: 4px;
        box-shadow: 0 0 4px #000;
        margin:2em auto;
        padding:32px 32px 16px 16px;
    }
}
</style>